import React from 'react';
import { Select as AntdSelect } from 'antd';
const Option = AntdSelect.Option;
import css from './index.less';
import PropTypes from 'prop-types';

export default class Select extends React.Component {

  static propTypes = {
    label: PropTypes.string,
    onChange: PropTypes.func,
    options: PropTypes.array,
    value: PropTypes.any,
  };

  static defaultProps = {
    label: '二级标题',
    onChange: () => {},
    value: 'jack',
    options: [
      {
        label: 'Jack',
        val: 'jack',
      }
    ]
  };


  render() {
    const { label, value, options, onChange } = this.props;
    const props = {
      className: css.row,
    };
    const selectProps = {
      value: String(value),
      onChange,
    };

    return (
      <div {...props}>
        <div className={css.label}>
          &bull; {label}
        </div>
        <div className={css.select}>
          <AntdSelect {...selectProps}>
            {
              options.map((item, index) => {
                return (
                  <Option value={String(item.val)} key={index}>
                    {item.label}
                  </Option>
                );
              })
            }
          </AntdSelect>
        </div>
      </div>
    );
  }
}
